<template>
  <div class="container">
    <mt-field label="手机号" placeholder="请输入手机号" type="tel" v-model="mobile" :attr="{ maxlength: 11 }"></mt-field>
    <mt-field label="密码" placeholder="请输入密码" type="password" v-model="password" state="success"></mt-field>
    <mt-field label="确认密码" placeholder="请再次输入密码" type="password" v-model="password2" state="success"></mt-field>
    <mt-field label="邮箱" placeholder="请输入邮箱" type="email" v-model="email" state="warning"></mt-field>
    <div class="btn-wrapper">
      <p class="">
        <button class="button is-primary" @click="btnSubmit">Submit</button>
      </p>
    </div>
  </div>
</template>

<script>
  import SHA256 from 'crypto-js/sha256';
  import { Field } from 'mint-ui';
  import { Message } from 'element-ui';
  import CookieTool from '../utils/cookieTool';

  export default {
    data() {
      return {
        mobile: '',
        password2: '',
        password: '',
        email: '',
      }
    },
    methods: {
      btnSubmit() {
        this.$http.post(this.$url.USERREGISTER, {
          password: SHA256(this.password).toString(),
          password2: SHA256(this.password2).toString(),
          mobile: this.mobile,
          email: this.email,
          flag: CookieTool.get('mobile'),
        }).then((res) => {
          if (res.data.rtnCode === '000') {
            Message({
              message: '添加成功，即将跳转主页',
              type: 'success',
              duration: 2000,
            });
            setTimeout(() => {
              this.$router.push({ name: 'Home' });
            }, 2000)
          } else {
            Message({
              message: res.data.rtnMsg,
              type: 'error',
              duration: 2000,
            });
          }
        }).catch((error) => {
          Message({
            message: '注册失败，请检查网络',
            type: 'error',
            duration: 2000,
          });
        })
      },
    },
    components: {
      'mt-field': Field,
    },
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
@import '../scss/base.scss';
  .container {
    margin: 1.5em 0em;
    .is-grouped {
      justify-content: center;
    }
    .btn-wrapper {
      text-align:center;
      margin-top: 0 auto;
      @include px2rem(margin-top, 60);
    }
    @media screen and (min-width: 769px) {
      .mint-cell {
        @include px2rem(margin-left, 100);
        @include px2rem(margin-right, 100);
      }
    }
    @media screen and (min-width: 992px) {
      .mint-cell {
        @include px2rem(margin-left, 130);
        @include px2rem(margin-right, 130);
      }
    }
    @media screen and (min-width: 1200px) {
      .mint-cell {
        @include px2rem(margin-left, 150);
        @include px2rem(margin-right, 150);
      }
    }
  }
</style>
